<template>
  <div class="student-detail">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>学生详情</span>
          <el-button @click="goBack" type="primary" size="small"
            >返回</el-button
          >
        </div>
      </template>

      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="6" animated />
      </div>

      <div v-else-if="studentInfo" class="student-info">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="学生ID">{{
            studentInfo.ID
          }}</el-descriptions-item>
          <el-descriptions-item label="姓名">{{
            studentInfo.name
          }}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{
            studentInfo.age
          }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{
            filterDict(studentInfo.gender, genderOptions)
          }}</el-descriptions-item>
          <el-descriptions-item label="介绍" :span="2">{{
            studentInfo.desc || '-'
          }}</el-descriptions-item>
          <el-descriptions-item label="头像" :span="2">
            <el-image
              v-if="studentInfo.avatar"
              style="width: 100px; height: 100px"
              :src="getUrl(studentInfo.avatar)"
              fit="cover"
              :preview-src-list="returnArrImg(studentInfo.avatar)"
            />
            <span v-else>-</span>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">{{
            formatDate(studentInfo.CreatedAt)
          }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{
            formatDate(studentInfo.UpdatedAt)
          }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <div v-else class="no-data">
        <el-empty description="未找到学生信息" />
      </div>
    </el-card>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import { findStudent } from '@/api/study/student'
  import { getUrl } from '@/utils/image'
  import {
    getDictFunc,
    formatDate,
    filterDict,
    returnArrImg
  } from '@/utils/format'

  const route = useRoute()
  const router = useRouter()

  // 响应式数据
  const studentInfo = ref(null)
  const loading = ref(false)
  const genderOptions = ref([])

  // 获取学生信息
  const getStudentInfo = async () => {
    const studentId = route.params.id
    if (!studentId) {
      ElMessage.error('学生ID不能为空')
      return
    }

    loading.value = true
    try {
      const response = await findStudent({ ID: studentId })
      if (response.code === 0) {
        studentInfo.value = response.data
      } else {
        ElMessage.error(response.msg || '获取学生信息失败')
      }
    } catch (error) {
      console.error('获取学生信息错误:', error)
      ElMessage.error('获取学生信息失败')
    } finally {
      loading.value = false
    }
  }

  // 获取性别字典
  const getGenderOptions = async () => {
    genderOptions.value = await getDictFunc('gender')
  }

  // 返回上一页
  const goBack = () => {
    router.go(-1)
  }

  // 组件挂载时获取学生信息
  onMounted(async () => {
    await getGenderOptions()
    getStudentInfo()
  })
</script>

<style scoped>
  .student-detail {
    padding: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .loading-container {
    padding: 20px;
  }

  .student-info {
    padding: 20px 0;
  }

  .no-data {
    padding: 40px;
    text-align: center;
  }
</style>
